import Taro, { Component } from '@tarojs/taro';
import { View, Image, Text, Button ,Form,Label,Input} from '@doctorwork/components';
// import DatePicker from '@vant/weapp/datetime-picker/index';
import { Picker,Radio } from '@tarojs/components';
import { connect } from '@tarojs/redux';
import Navigate from '../../components/Navigate/index';
import { rewriteAddMTA } from '../../model/utils/rewrite';
import SelectCar from '../../components/selectCar/index';

import './index.styl';
import { timeFormat } from '../../model/utils/common';

@connect(({ createMaintain }) => ({
    ...createMaintain
}))
@rewriteAddMTA
export default class CreateMaintain extends Component {
    constructor(props){
        super(props);
        this.state = {
            colorArr : ['#8A2BE2','#BC8F8F','#FF8000','#68BE23','#FF9912','#00C787','#FFC0CB','#9F88FF']
        };
    }
    config = {
        navigationBarTitleText: '新增保养记录'
    };

    componentDidShow(){
        const id = this.$router.params.id;
        this.initData(id);
    }


    /**
     * 初始化数据
     * @param {*} province 
     */
    initData(id,province, location={}){
        this.props.dispatch({
            type : 'createMaintain/init',
            payload: {id,province,location}
        });
    }
    validate(){
        const {list, detail} = this.props;
        const {mileage,price} = detail;

        if(!detail.carNumber){
            return '请先添加车辆';
        }
        if(!mileage){
            return '请输入汽车里程';
        }
        if(!price){
            return '请输入保养费用';
        }
        let hasMaintenance = list.findIndex(item => detail[item.type]);
        if(hasMaintenance == -1){
            return '请至少选择一个保养项目';
        }

        return null;
    }

    submit(){
        const valid = this.validate();
        if(valid){
            wx.showToast({
                icon: 'none',
                duration: 3000,
                title: valid
            });
        }else{
            this.props.dispatch({
                type : 'createMaintain/submit'
            });
        }
        
    }

    addCar(){
        
        this.props.dispatch({
            type : '$router/forward',
            payload : {
                url : '/pages/car/index',
            }
        });
    }
    /**
     * 切换日期
     * @param {*} e 
     */
    onDateChange(e){
        const time = e.target.value;
        const {detail} = this.props;
        this.props.dispatch({
            type : 'createMaintain/save',
            payload : {
                detail : {
                    ...detail,
                    time
                },
            }
        });
    }
    // 
    changeCarModal(carModal){
        const {detail} = this.props;
        if(detail.id){
            wx.showToast({title: '车辆不能修改', icon: 'none'});
            return;
        }
        this.props.dispatch({
            type : 'createMaintain/save',
            payload : {
                carModal
            }
        });
    }
    /**
     * 保养项目奠基
     * @param {*} type 
     */
    radioChecked(type){
        console.log('tpye',type);
        const {detail, isEdit} = this.props;
        if(!isEdit) return;
        const checked = Number(!detail[type]);
        this.props.dispatch({
            type: 'createMaintain/save',
            payload: {
                detail : {
                    ...detail,
                    [type]: checked
                }
            }
        });
    }
    /**
     * 里程数
     * @param {*} e 
     */
    onMilChange(e){
        const {detail} = this.props;
        const mileage = e.target.value;
        this.props.dispatch({
            type: 'createMaintain/save',
            payload: {
                detail : {
                    ...detail,
                    mileage
                }
            }
        });
    }
    /**
     * 保养费用记录
     * @param {*} e 
     */
    onPriceChange(e){
        const {detail} = this.props;
        const price = e.target.value;
        this.props.dispatch({
            type: 'createMaintain/save',
            payload: {
                detail : {
                    ...detail,
                    price
                }
            }
        });
    }
    /**
     * 选中车辆
     * @param {*} carNumber 
     */
    onCarSelected(carNumber){
        this.props.dispatch({
            type: 'createMaintain/carNumberChange',
            payload: {
                carNumber
            }
        });
    }
    /**
     * 取消选择车辆
     */
    onCarCancel(){
        this.props.dispatch({
            type : 'createMaintain/save',
            payload : {
                carModal: false
            }
        });
    }
    edit(){
        this.props.dispatch({
            type: 'createMaintain/save',
            payload: {
                isEdit: true
            }
        });
    }
    render() {
        const {colorArr} = this.state;
        const {detail,carModal,carList,list,isEdit} = this.props ;
        const disabled = !(detail.price&&detail.oil_amount&&detail.total_price&detail.mileage);
        console.log(detail.time);
        const endTime = timeFormat(Date.now()+86399,'YYYY-MM-DD');
        return (
            <View className='container'>
                <Navigate
                    title='新增保养记录'
                    color='black'
                    backgroundColor='white'
                    backTextColor='black'
                />
                <View className='content'>
                    <Label className='title'>基础信息: </Label>
                    <View className='oil-container'>
                        {
                            carModal && <SelectCar carList={carList} carNumber={detail.carNumber} onCarSelected={this.onCarSelected.bind(this)} onClose={this.onCarCancel.bind(this)} />
                        }
                        <View className='input-item'>
                            <Label className='item-title'>选择车辆: </Label>
                            {
                                detail.carNumber ? <Text className='add-car' onClick={this.changeCarModal.bind(this,true)} data-name={detail.carNumber}>{detail.carNumber}</Text> :
                                    <Text className='add-car' onClick={this.addCar.bind(this)} data-name='点击添加车辆'>点击添加车辆</Text>
                            }
                        
                        </View>
                        <View className='input-item'>
                            <Label className='item-title'>保养时间: </Label>
                            <Label>
                                <View className='picker'>
                                    <Picker mode='date' onChange={this.onDateChange} value={detail.time} end={endTime} disabled={!isEdit}>
                                        <Label style='margin-right: 10rpx'>{detail.time}</Label> >
                                    </Picker>
                                </View>
                            </Label>
                        </View>
                        <View className='input-item'>
                            <Label className='item-title'>总里程数(KM): </Label>
                            <Input
                                type='digit'
                                placeholder='请输入当前行驶里程'
                                maxlength='11'
                                disabled={!isEdit}
                                value={detail.mileage}
                                className='text-right'
                                onInput={this.onMilChange.bind(this)}
                            />
                        </View>
                        <View className='input-item'>
                            <Label className='item-title'>保养费用(¥): </Label>
                            <Input
                                type='digit'
                                placeholder='请输入保养费用'
                                maxlength='11'
                                disabled={!isEdit}
                                value={detail.price}
                                className='text-right'
                                onInput={this.onPriceChange.bind(this)}
                            />
                        </View>
                    </View>
                    <Label className='title'>保养项目: </Label>
                    <View className='select-container'>
                        {
                            list.map( (item,index) => {
                                const selected = !! detail[item.type];
                                const backgroundColor = selected ? colorArr[index] : '#f5f5f5';
                                return <View className={selected  ?'select-item selcted' : 'select-item'}  style={{backgroundColor: backgroundColor  }} key={item.type} onClick={() => this.radioChecked(item.type)} data-name={item.name}>
                                    <View>
                                        <View className='type'>{item.name} </View>
                                        
                                        <View className='desc'>
                                            <Label>{item.time}天</Label>
                                            <Label>{item.mileage}公里</Label>
                                        </View>

                                    </View>
                                    {
                                        isEdit && <Radio value='r1' checked={selected} />
                                    }
                                    
                                </View>;
                            })
                        }
                    </View>
                    <View className='footer'>
                        {
                            isEdit ? <Button onClick={this.submit.bind(this)} className={disabled ? 'oil-btn disabled' : 'oil-btn'} data-name='保存'>
                            保 存
                            </Button> : <Button onClick={this.edit.bind(this)} className={disabled ? 'oil-btn disabled' : 'oil-btn'} data-name='编辑'>
                            编 辑
                            </Button>
                        }
                        
                        
                    </View>
                </View>
            </View>

        );
    }
}
